<!--
 * @Author: Lzx
 * @Date: 2022-04-22 13:24:10
 * @LastEditors: Lzx
 * @LastEditTime: 2023-05-22 12:51:55
 * @FilePath: /web-vue/src/pages/Housing/detail.vue
 * @Description: 房间详情
-->
<template>
  <div class="loading-layer">
    <el-page-header @back="() => $router.push('/Housing')" content="详情页面">
    </el-page-header>
    <el-row v-if="hosueObj" class="data-table row-panel row-panel-first">
      <el-card>
        <!-- 轮播图 -->
        <el-col :span="11">
          <el-carousel>
            <el-carousel-item
              v-for="(url, index) in hosueObj.houseImagesUrl"
              :key="index"
            >
              <el-image
                :src="`${$store.state.API_ROOT}${url}`"
                :preview-src-list="[`${$store.state.API_ROOT}${url}`]"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <!-- 描述信息 -->
        <el-col :span="12" :offset="1">
          <el-col :span="24">
            <el-tag class="title" type="primary">{{
              hosueObj.houseTitle
            }}</el-tag>
          </el-col>
          <el-col :span="18">
            <el-tag type="danger">优惠价：</el-tag>
            <el-link type="danger" :underline="false"
              >￥ {{ hosueObj.cost }}&nbsp;/&nbsp;天
            </el-link>
          </el-col>
          <el-col :span="6">
            <el-button
              v-if="hosueObj.houseStatus === 2"
              class="button"
              type="primary"
              icon="el-icon-s-home"
              @click="$refs.orderAdd.openAddForm(true, hosueObj)"
              >立即预定
            </el-button>
            <el-button
              v-else
              class="button"
              type="danger"
              icon="el-icon-circle-close"
              disabled
              >不可预定
            </el-button>
          </el-col>
          <el-col :span="24">
            <el-descriptions :column="2">
              <el-descriptions-item label="折扣">
                <el-link type="warning" :underline="false">{{
                  hosueObj.discount
                }}</el-link>
              </el-descriptions-item>
              <el-descriptions-item label="房型">
                <template
                  v-for="(item, index) in $store.state.DICT.houseTypeSelect"
                >
                  <el-tag
                    v-if="item.code === hosueObj.houseType"
                    :key="index"
                    :type="item.theme"
                  >
                    {{ item.name }}
                  </el-tag>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="配套">{{
                hosueObj.provide
              }}</el-descriptions-item>
              <el-descriptions-item label="入住要求">{{
                hosueObj.command
              }}</el-descriptions-item>
              <el-descriptions-item label="地区">
                <el-cascader
                  v-model="hosueObj.regionId"
                  :options="$store.state.DICT.regionCode"
                  :props="{
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    emitPath: false,
                    value: 'id',
                    label: 'name',
                  }"
                  size="mini"
                  disabled
                >
                </el-cascader>
              </el-descriptions-item>
              <el-descriptions-item label="具体位置">{{
                hosueObj.detailLocation
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-col>
      </el-card>
    </el-row>
    <el-row class="data-table row-panel">
      <el-col>
        <el-card>
          <el-tabs type="card">
            <el-tab-pane label="房间详情">
              <Detail v-if="hosueObj" :obj="hosueObj"></Detail>
            </el-tab-pane>
            <!-- 租客评价列表 -->
            <el-tab-pane label="租客评价">
              <el-collapse :accordion="false">
                <el-collapse-item
                  v-for="(item, index) in appraiseList"
                  :key="index"
                >
                  <template slot="title">
                    <el-image
                      class="el-icon-lzx"
                      :src="`${$store.state.API_ROOT}${item.avatar}`"
                      :preview-src-list="[
                        `${$store.state.API_ROOT}${item.avatar}`,
                      ]"
                    >
                    </el-image>
                    <el-link type="" :underline="false">
                      &nbsp;&nbsp;{{ item.createUserName }}
                    </el-link>
                    <el-link type="info" :underline="false">
                      &nbsp;&nbsp;{{ item.updateTime }}
                    </el-link>
                  </template>
                  <el-rate
                    v-model="item.starMark"
                    show-text
                    text-color="#ff9900"
                    :texts="['差评', '一般般', '不错', '满意', '非常满意']"
                    :colors="{
                      1: '#99A9BF',
                      2: '#f0d186',
                      3: '#f7cb62',
                      4: '#F7BA2A',
                      5: '#FF9900',
                    }"
                    disabled
                  >
                  </el-rate>
                  <p>
                    <el-link type="warning" :underline="false">
                      {{ item.appraise }}</el-link
                    >
                  </p>
                  <el-link type="danger" :underline="false">
                    房东回复：{{ item.reply }}</el-link
                  >
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加租房订单表单 -->
    <OrderAdd
      ref="orderAdd"
      @afterSubmit="() => $router.push('/Order')"
    ></OrderAdd>
  </div>
</template>

<script>
import Detail from "@/views/House/detail";
import OrderAdd from "@/views/HousingOrder/addForm";
export default {
  name: "housingDetail",

  components: {
    Detail,
    OrderAdd,
  },

  data() {
    return {
      houseId: null,
      hosueObj: null,
      appraiseList: [],
    };
  },

  // 组件活跃时执行
  activated() {
    // 获取路由传递的参数
    this.houseId = this.$route.params.id;
    // 初始化查询
    this.queryHouseApi();
    this.queryHouseAppraise();
  },

  methods: {
    // 查询【房源】API
    queryHouseApi() {
      const loading = this.$loading({
        target: document.querySelector(".loading-layer"),
        lock: true,
        text: "正在加载，请耐心等待！",
      });

      this.$api
        .queryOneHouse(this.houseId)
        .then((res) => {
          loading.close();
          let { status, message, data } = res.data;
          if (status == 200) {
            this.hosueObj = data;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【房源】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch((err) => {
          loading.close();
          console.log(`【房源】查询接口发生错误: ${err}`);
        });
    },

    // 查询租户评价列表
    queryHouseAppraise() {
      let param = {
        houseId: this.houseId,
        orderStatus: 6,
        pageSize: 1000,
      };

      this.$api
        .queryHousingOrderAppraise(param)
        .then((res) => {
          this.appraiseList = [];

          let { status, message, data } = res.data;
          if (status == 200) {
            this.appraiseList = data.items;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          }
        })
        .catch((err) => {
          console.log(`【租客评价】查询接口发生错误: ${err}`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.el-icon-lzx {
  border-radius: 50%;
  height: 33px;
}

.title {
  font-size: 30px;
  margin-bottom: 9px;
}
</style>
